<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/swiper.min.css">
		<link rel="stylesheet" href="../css/jquery-confirm.min.css">

		<style>
			body {
				background: transparent;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			
			.swiper-container {
				width: 100%;
				/*padding-top: 40px;*/
				padding-bottom: 50px;
				/*-webkit-perspective: 1200px;
				-moz-perspective: 1200px;
				-ms-perspective: 1200px;
				perspective: 1200px*/
			}
			
			.swiper-slide {
				background-position: center;
				background-size: cover;
				width: 80vw;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
				/*height: 100vw;*/
			}
			
			.terminal-card {
				box-shadow: 2px 2px 20px #888888;
			}
			
			.terminal-card .mui-card-header {
				background-color: #007AFF;
				text-align: center;
				font-size: 6vw;
				height: 15vw;
				line-height: 10vw;
				color: white;
			}
			
			.speedchart {
				width: 80vw;
				height: 50vw;
			}
			
			.mui-table {
				text-align: center;
				border-top: solid;
				border-top-color: gainsboro;
				padding-top: 10px;
				line-height: 10vw;
			}
			
			.mui-table thead {
				color: gainsboro;
				font-size: medium;
			}
			
			.mui-table tbody {
				color: deepskyblue;
				font-size: large;
			}
			
			.mui-card-footer {
				display: block;
			}
			
			.cmdbutton {
				width: 27%;
				margin-left: 5%;
				margin-top: 5%;
			}
			
			.smallinfo {
				font-size: small;
				position: absolute;
				right: 10px;
				top: 8vw;
				float: right;
			}
			
			.mutil-cmd-div {
				text-align: center;
				font-size: large;
			}
			
			.mutil-cmd-div button {
				font-size: large;
				width: 80%;
			}
			
			.addTerminal {
				width: 80%;
				position: absolute;
				bottom: 20px;
				left: 10%;
				display: block;
			}
			
			.addTerminal a {
				width: 100%;
				font-size: x-large;
				margin-bottom: 10px;
			}
			
			.mui-card {
				/*width: 80%;
				left: 10%;*/
				box-shadow: 0px 0px 10px #333333;
			}
			
			.terminalNameSpan {
				text-align: center;
				color: white !important;
				font-size: large;
			}
			
			.mui-table-view {}
			
			.mui-table-view-cell {
				background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#9933cc), to(#6699ff));
			}
			
			.mui-table-view-cell>a:not(.mui-btn).mui-active {
				background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#6699ff), to(#9933cc));
			}
			
			.mui-collapse-content {
				text-align: center;
			}
			
			.btn-addwarnconfig {
				width: 80%;
			}
		</style>

	</head>

	<body>
		<div class="mui-card">
			<!--页眉，放置标题-->
			<div class="mui-card-header"><span id="span_filterr">过滤</span>
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" placeholder="">
				</div>
			</div>
			<!--内容区-->
			<div class="mui-card-content">
				<ul class="mui-table-view" id="terminaldiv">
				</ul>
			</div>
			<!--页脚，放置补充信息或支持的操作-->
			<!--<div class="mui-card-footer">
				
				
			</div>-->
		</div>

		<!--<div class="addTerminal">
			<a href="wifi.html" class="mui-btn mui-btn-primary " id="addnewterminal">添加新设备</a>
			<a href="#" class="mui-btn mui-btn-success " id="addnewterminalExt" onclick="addTerminal()">手工添加</a>
		</div>-->

		<li class="mui-table-view-cell mui-collapse terminal-list-cell" id="terminal-template" style="display: none;">
			<a class="mui-navigate-right terminalNameSpan" href="#" id="a_terminalNameSpan">设备名称</a>
			<div class="mui-collapse-content">
				<h3 id="h_monitor">监控事件表</h3>
				<table class="mui-table">
					<thead>
						<th class="label_name">名称</th>
						<th class="label_aimfield">关注字段</th>
						<th class="label_type">规则类型</th>
						<th class="label_rule">规则</th>
						<th class="label_control">操作</th>
					</thead>
					<tbody></tbody>
				</table>
				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-btn-primary btn-addwarnconfig btn-warnconfig btn-terminal">添加</button>
				</div>
			</div>
		</li>

		<div style="display: none;">

			<form action="" class="formName mui-input-group" id="addWarnConfigForm">
				<div class="mui-input-row">
					<label class="label_name">名称</label>
					<input type="text" placeholder="规则名称" class="name form-control mui-input-clear" required />
				</div>
				<div class="mui-input-row">
					<label class="label_field">字段</label>
					<select class="aimfield  mui-btn-block mui-input-clear" id="selectvaluecell">
						<option value="1">转速</option>
						<option value="2">模式</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label id="label_ruletype">规则类型</label>
					<select class="ruletype  mui-btn-block mui-input-clear">
						<option value="EQUAL">等于(=)</option>
						<option value="NOT_EQUAL">不等于(=)</option>
						<option value="GREATER_THAN">大于(&gt;)</option>
						<option value="LESS_THAN">小于(&lt;)</option>
						<option value="GREATER_THAN_OR_EQUAL">大于等于(&gt;=)</option>
						<option value="LESS_THAN_OR_QUAL">小于等于( &lt;=)</option>
						<option value="LIKE">包含字段(Like "%")</option>
						<option value="BEGIN_WITH">以**开头</option>
						<option value="END_WITH">以**结尾</option>
						<option value="REGEX">正则表达式</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label id="label_value">关注值</label>
					<input type="text" placeholder="2000" class="rule form-control mui-input-clear" required />
				</div>
		</div>
		</form>

		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../libs/easymob-webim-sdk/jquery-1.11.1.js"></script>
		<script src="../js/jquery-confirm.min.js"></script>
		<script src="../js/dateformat.js"></script>
		<script type="text/javascript" src="../libs/jquery.i18n.properties.min.js"></script>
		<script type="text/javascript">
			var isEn = false;

			function initList() {

				if(app.getLanguage() == "en") {
					isEn = true;
					jQuery.i18n.properties({
						name: 'Messages',
						path: '../bundle/',
						mode: 'both',
						language: "en",
						async: true,
						callback: function() {
							jQuery('#h_monitor').html("Monitor Table");
							jQuery('.label_name').html("Name");
							jQuery('.label_aimfield').html("Aim Field");
							jQuery('.label_type').html("Type");
							jQuery('.label_rule').html("Rule");
							jQuery('.label_control').html("Contorl");
							jQuery('.label_field').html("Field");
							jQuery('.btn-addwarnconfig').html("Add");
							jQuery('.label_value').html("Value");
						}
					});
				}

				app.freshTerminal();

				app.getServerConfig(function(serverconfig) {

					app.getTerminal("", function(terminals) {
						var terminaldiv = jQuery("#terminaldiv").empty();

						jQuery.each(terminals, function(index, data) {
							//console.log(data);
							var template = jQuery("#terminal-template").clone();
							template.attr("id", "terminaldiv_" + data.id);
							template.data("id", data.id);
							template.data("configid", data.socketServerConfig.configID);
							template.data("hpstr", data.socketServerConfig.terminalHPConfig);
							template.show();

							template.find(".terminalNameSpan").html(data.terminalName);
							terminaldiv.append(template);

						});

						app.getWarnConfig("", function(warnconfis) {
							jQuery.each(warnconfis, function(index, data) {
								//console.log(index);
								console.log(data);
								var terminaldivfindbydataid = jQuery("#terminaldiv_" + data.terminalid);
								var warnconfigtablebody = terminaldivfindbydataid.find(".mui-table tbody");
								var tr = jQuery("<tr>");
								tr.attr("id", "warnconfig_" + data.id);
								tr.data("wid", data.id);
								tr.data("json", JSON.stringify(data));
								tr.append("<td>" + data.name + "</td>");
								tr.append("<td>" + data.aimField + "</td>");
								tr.append("<td>" + app.WarnConfigTypeEnStr[data.ruleType] + "</td>");
								tr.append("<td>" + data.rule + "</td>");
								tr.append('<td><button type="button" class="mui-btn mui-btn-success btn-update btn-warnconfig">改</button><button type="button" class="mui-btn mui-btn-danger btn-delete btn-warnconfig">删</button></td>');
								warnconfigtablebody.append(tr);
							});

						});
					});
				});
			}

			function addWarnConfigCallback(data) {
				console.log(data);
				$.alert(data.returnMessage);
				initList();
			}

			function addWarnConfig(id) {
				var warnConfigForm = jQuery("#addWarnConfigForm").clone();
				var selectvalue = warnConfigForm.find("#selectvaluecell");
				var $this = jQuery("#terminaldiv_" + id);
				selectvalue.empty();
				var values = $this.data("hpstr").split(";");
				var cid = $this.data("configid");
				for(var v in values) {
					selectvalue.append("<option value='" + values[v] + "'>" + values[v] + "</option>")
				}
				var content = warnConfigForm.html();
				jQuery.confirm({
					title: '添加报警监控条件',
					content: content,
					boxWidth: '80%',
					useBootstrap: false,
					buttons: {
						formSubmit: {
							text: '确认',
							btnClass: 'btn-blue',
							action: function() {
								//								uid,cid,tid,name,aimfield,ruletype,rule

								var ruletype = this.$content.find('.ruletype').val();
								var name = this.$content.find('.name').val();
								var aimfield = this.$content.find('.aimfield').val();
								var rule = this.$content.find('.rule').val();
								if(!name || !rule) {
									$.alert('未填写正确');
									return false;
								}
								//console.log(configtype);
								app.addWarnConfig(cid, id, name, aimfield, ruletype, rule, addWarnConfigCallback);
							}
						},
						cancel: {
							text: '取消',
							action: function() {

							}
						},
					},
					onContentReady: function() {
						// bind to events
						var jc = this;
						this.$content.find('form').on('submit', function(e) {
							// if the user submits the form by pressing enter in the field.
							e.preventDefault();
							jc.$$formSubmit.trigger('click'); // reference the button and click it
						});
					}
				});
			}

			function updateWarnConfig(id, wid) {
				var warnConfigForm = jQuery("#addWarnConfigForm").clone();
				var selectvalue = warnConfigForm.find("#selectvaluecell");
				var $this = jQuery("#terminaldiv_" + id);
				selectvalue.empty();
				var values = $this.data("hpstr").split(";");
				var cid = $this.data("configid");
				for(var v in values) {
					selectvalue.append("<option value='" + values[v] + "'>" + values[v] + "</option>")
				}

				var content = warnConfigForm.html();
				jQuery.confirm({
					title: '修改报警监控条件',
					content: content,
					boxWidth: '80%',
					useBootstrap: false,
					onOpenBefore: function() {
						var oldWarnConfigStr = jQuery("#warnconfig_" + wid).data("json");
						var oldWarnConfig = JSON.parse(oldWarnConfigStr);
						this.$content.find('.ruletype').val(oldWarnConfig.ruleType);
						this.$content.find('.name').val(oldWarnConfig.name);
						this.$content.find('.aimfield').val(oldWarnConfig.aimField);
						this.$content.find('.rule').val(oldWarnConfig.rule);
					},
					buttons: {
						formSubmit: {
							text: '确认',
							btnClass: 'btn-blue',
							action: function() {
								//								uid,cid,tid,name,aimfield,ruletype,rule

								var ruletype = this.$content.find('.ruletype').val();
								var name = this.$content.find('.name').val();
								var aimfield = this.$content.find('.aimfield').val();
								var rule = this.$content.find('.rule').val();
								if(!name || !rule) {
									$.alert('未填写正确');
									return false;
								}
								//console.log(configtype);
								app.updateWarnConfig(wid, name, aimfield, ruletype, rule, addWarnConfigCallback);
							}
						},
						cancel: {
							text: '取消',
							action: function() {

							}
						},
					},
					onContentReady: function() {
						// bind to events
						var jc = this;
						this.$content.find('form').on('submit', function(e) {
							// if the user submits the form by pressing enter in the field.
							e.preventDefault();
							jc.$$formSubmit.trigger('click'); // reference the button and click it
						});
					}
				});
			}

			function changeCallBack() {
				//app.freshTerminal();
				initList();
			}

			function initPage() {
				initList();

				jQuery(document).on("click", ".btn-warnconfig", function(e) {
					//console.log(e);
					var button = jQuery(e.target);
					var li = button.parents("li");
					var id = li.data("id");
					var name = li.find(".terminalName").val();
					var sn = li.find(".terminalSn").val();
					if(button.hasClass("btn-update")) {
						var wid = button.parents("tr").data("wid");
						updateWarnConfig(id, wid);
					} else if(button.hasClass("btn-addwarnconfig")) {
						addWarnConfig(id);
					} else {
						var wid = button.parents("tr").data("wid");
						jQuery.confirm({
							title: '确认删除!',
							content: '删除当前警告监视条件吗？',
							buttons: {
								confirm: {
									text: "确认",
									action: function() {
										app.delWarnConfig(wid, addWarnConfigCallback);
									}
								},
								cancel: {
									text: "取消",
									action: function() {

									}
								}
							}
						});
					}

					console.log(id);
					console.log(name);
				});

			}
			(function($, doc) {
				$.plusReady(initPage);
			}(mui, document));
//			jQuery(document).ready(initPage);
		</script>
	</body>

</html>